import React, { memo, useEffect, useState } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { getReport } from '../home/store/actionCreators'
import HYReportList from '../../components/ReportList'
import { Pagination } from "antd";

export default memo(function ReportList() {

    const { reportList } = useSelector(
        (state) => ({
            reportList: state.getIn(["home", "reportList"]),
        }),
        shallowEqual
    );

    const [page, setPage] = useState(1)
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getReport({
            category: 12,
            page: page,
            pageSize: 9999,
        }));
    }, [dispatch, page]);
    const handleChange = (val) => {
        setPage(val)
    }
    return (
        <div className='w listPadding'>
            <HYReportList list={reportList.list}></HYReportList>
            <div style={{ textAlign: 'center' }}>
                <Pagination
                    defaultCurrent={page || 1}
                    current={typeof page == 'undefined' ? 1 : page}
                    defaultPageSize={12}
                    onChange={e => handleChange(e)}
                    total={reportList.total}
                />
            </div>
        </div>
    );
});
